<template>
    <div>
      <button @click='goUser()'>user页面</button>
    <button @click='goShop()'>shop页面</button>
    <button @click='goList()'>list页面</button>
       <template>
  <el-table
    :data="tableData"
    height="300"
    border
    style="width: 80%">
    <el-table-column
      label="编号"
      type="index"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      >
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价"
      >
    </el-table-column>
    <el-table-column
       
      label="数量">
      <template slot-scope="scope">
        <el-button
        prop='loder'
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">+</el-button>
          {{ scope.row.loder}}
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">-</el-button>
      </template>
    </el-table-column>
        <el-table-column
      label="小计"
      >
        <template slot-scope="scope">
       
          {{ scope.row.price*scope.row.loder}}
      
      </template>
    </el-table-column>
  </el-table>
</template>
    </div>
</template>

<script>
    export default {
    data() {
      return {
        sum:0,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          price: 18,
          id:1,
          loder:1,
        }, {
          date: '2016-05-02',
          name: '王小虎',
          price: 18,
          id:1,
          loder:1,
        }, {
          date: '2016-05-04',
          name: '王小虎',
          price: 18,
          id:1,
          loder:1,
        }, {
          date: '2016-05-01',
          name: '王小虎',
          price: 18,
          id:1,
          loder:1,
        }],
      }
    },
      methods: {
      handleEdit(index, row) {
        console.log(index, row);
        console.log(row.price*2);
       
        row.loder++,
        console.log(row.loder);
      },
      handleDelete(index, row) {
        console.log(index, row);
         if(row.loder>=1){
             row.loder--
         }
         console.log(row.price2);
      },
      goUser(){
      this.$router.push('/user');
    },
    goShop(){
      this.$router.push('/shop');
    },
    goList(){
      this.$router.push('/list');
    },
    }
    
  }

</script>

<style lang="less" scoped>

</style>